// use Jquery to implement animation

// initialize
// different int every page
$(document).ready(function(){   
	initWeb(1);
});

function naviBarAnim(item, dura)
{
	$("#naviBar").stop().animate(
		{left: naviBarPos[item].pos, width: naviBarPos[item].len},
			dura, "swing");
	
	
}

function initWeb(pageName)
{
	naviBarPos = new Array();
	naviBarPos[0] = new Object();
	naviBarPos[1] = new Object();
	naviBarPos[2] = new Object();
	naviBarPos[3] = new Object();
	naviBarPos[4] = new Object();
	naviBarPos[0].pos = 639; //home
	naviBarPos[0].len = 43; 
	naviBarPos[1].pos = 722; //gamedesign
	naviBarPos[1].len = 107;
	naviBarPos[2].pos = 868;	//arts
	naviBarPos[2].len = 30;
	naviBarPos[3].pos = 938;	//projects
	naviBarPos[3].len = 60;
	naviBarPos[4].pos = 1037;	//blog
	naviBarPos[4].len = 32;

	switch (pageName)
	{
	case 0:
		naviBarAnim(0, 5);
		break;
	case 1:
		naviBarAnim(1, 5);
		break;
	case 2:
		naviBarAnim(2, 5);
		break;
	case 3:
		naviBarAnim(3, 5);
		break;
	case 4:
		naviBarAnim(4, 5);
		break;
	}

	currentPage = pageName;

	$("#briefIntroBarBottom").hide();
	$("#briefIntroBarUp").hide();
}

$(".menu #Home").mouseover(
	function ()
	{
		naviBarAnim(0, 100);
	}
	);

$(".menu #GameDesign").mouseover(
	function ()
	{
		naviBarAnim(1, 100);
	}
	);

$(".menu #Arts").mouseover(
	function ()
	{
		naviBarAnim(2, 100);
	}
	);

$(".menu #Projects").mouseover(
	function ()
	{
		naviBarAnim(3, 100);
	}
	);

$(".menu #Blog").mouseover(
	function ()
	{
		naviBarAnim(4, 100);
	}
	);

$(".menu").mouseout(function()
{
	naviBarAnim(currentPage, 1000);
});

$(".briefIntro").mouseover(function()
{
	$("#briefIntroBarBottom").show();
	$("#briefIntroBarUp").show();
	
});

$(".briefIntro").mouseout(function()
{
	$("#briefIntroBarBottom").hide();
	$("#briefIntroBarUp").hide();
});

